<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}展丞信件箱{% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-pink: #f9a8d4;
            --primary-green: #86efac;
            --accent-pink: #ec4899;
            --accent-green: #22c55e;
        }
        
        body {
            background: linear-gradient(135deg, var(--primary-pink) 0%, var(--primary-green) 100%);
            min-height: 100vh;
        }
        
        .fox-rabbit-bg {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 50 Q35 45 40 50 Q45 55 50 50 Q55 45 60 50 Q65 55 70 50' stroke='%23f9a8d4' stroke-width='2' fill='none'/%3E%3Ccircle cx='45' cy='45' r='2' fill='%2386efac'/%3E%3Ccircle cx='55' cy='45' r='2' fill='%2386efac'/%3E%3C/svg%3E");
            background-size: 100px 100px;
            opacity: 0.1;
        }
        
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(236, 72, 153, 0.15);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--accent-pink), var(--accent-green));
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(236, 72, 153, 0.3);
        }
    </style>
</head>
<body class="fox-rabbit-bg">
    <nav class="bg-white/80 backdrop-blur-sm shadow-lg">
        <div class="max-w-6xl mx-auto px-4 py-4">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-envelope text-2xl text-pink-500"></i>
                    <h1 class="text-2xl font-bold bg-gradient-to-r from-pink-500 to-green-500 bg-clip-text text-transparent">
                        展丞信件箱
                    </h1>
                </div>
                <div class="flex space-x-4">
                    <a href="/" class="text-gray-700 hover:text-pink-500 transition">
                        <i class="fas fa-home mr-1"></i>首页
                    </a>
                    <a href="/write" class="text-gray-700 hover:text-green-500 transition">
                        <i class="fas fa-pen mr-1"></i>写信
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <main class="max-w-6xl mx-auto px-4 py-8">
        {% block content %}{% endblock %}
    </main>

    <footer class="bg-white/80 backdrop-blur-sm mt-16">
        <div class="max-w-6xl mx-auto px-4 py-6 text-center">
            <p class="text-gray-600">
                <i class="fas fa-heart text-pink-500"></i>
                展丞信件箱 - 用心记录每一封信
                <i class="fas fa-leaf text-green-500"></i>
            </p>
        </div>
    </footer>

    <script>
        // 添加一些可爱的动画效果
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.card-hover');
            cards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-2px)';
                });
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                });
            });
        });
    </script>
</body>
</html>
